baubs git
Commit 512eb732ded37638c9fe49f209d04fc6b338e482
Parents : 957a3f0
Author : Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date : 2025-12-27T17:04:48+01:00
feature: Enhance Konva rendering with React.memo optimization
Wrap PatternCanvas and PatternLayer components with React.memo to
prevent unnecessary re-renders when props haven't changed. This builds
on the existing useMemo optimizations and provides better performance
with large patterns and frequent UI updates.
Benefits:
- Prevents re-renders when parent components update
- Improves render performance during active sewing
- Smoother user experience with complex patterns
Fixes #43
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Changes
2 files changed, 6 insertions(+), 6 deletions(-)
Diff
diff --git a/src/components/PatternCanvas/PatternCanvas.tsx b/src/components/PatternCanvas/PatternCanvas.tsx
index fae8a58..dbddabf 100644
--- a/src/components/PatternCanvas/PatternCanvas.tsx
+++ b/src/components/PatternCanvas/PatternCanvas.tsx
@@ -1,4 +1,4 @@
-import { useRef, useMemo } from "react";
+import { useRef, useMemo, memo } from "react";
import { useShallow } from "zustand/react/shallow";
import {
useMachineStore,
@@ -23,7 +23,7 @@ import { ZoomControls } from "./ZoomControls";
import { PatternLayer } from "./PatternLayer";
import { useCanvasViewport, usePatternTransform } from "@/hooks";
-export function PatternCanvas() {
+export const PatternCanvas = memo(function PatternCanvas() {
// Machine store
const { sewingProgress, machineInfo } = useMachineStore(
useShallow((state) => ({
@@ -277,4 +277,4 @@ export function PatternCanvas() {
</CardContent>
</Card>
);
-}
+});
diff --git a/src/components/PatternCanvas/PatternLayer.tsx b/src/components/PatternCanvas/PatternLayer.tsx
index d104877..c9d61f3 100644
--- a/src/components/PatternCanvas/PatternLayer.tsx
+++ b/src/components/PatternCanvas/PatternLayer.tsx
@@ -5,7 +5,7 @@
* Handles both interactive (draggable/rotatable) and locked states
*/
-import { useMemo, type RefObject } from "react";
+import { useMemo, memo, type RefObject } from "react";
import { Group, Transformer } from "react-konva";
import type Konva from "konva";
import type { KonvaEventObject } from "konva/lib/Node";
@@ -30,7 +30,7 @@ interface PatternLayerProps {
attachTransformer?: () => void;
}
-export function PatternLayer({
+export const PatternLayer = memo(function PatternLayer({
pesData,
offset,
rotation = 0,
@@ -143,4 +143,4 @@ export function PatternLayer({
)}
</>
);
-}
+});
Served by rngit 1.3.3 - Generated in 0.04s